import React from "react";

import PropTypes from "prop-types"
import theme from "./default"
import deepmerge from "deepmerge";

export const ThemeContext = React.createContext(theme)
const ThemeProvider = (props) => {
  return (
    <ThemeContext.Provider value={theme}>
      {
        props.children
      }
    </ThemeContext.Provider>
  )
}

export const WithTheme = (props) => {
  const getStyles = (theme: Theme) => {
    const {themeStyles, styles} = props;
    const defaultThemeStyles = themeStyles(theme);
    if (styles) {

      // TODO: check these styles has changed
      // merge styles from user defined
      return deepmerge(defaultThemeStyles, styles);
    }
    return defaultThemeStyles;
  };
  return (
    <ThemeContext.Consumer>
      {
        theme => props.children(getStyles(theme))
      }
    </ThemeContext.Consumer>
  )
}

export default ThemeProvider
